<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./DL.css">
</head>
<body>
    <div class="container">
        <div>
            <div class="left">
                <ul>
                    <li>
                        <p>扫描二维码登录</p>
                    </li>
                    <li class="img"><img src="./images/DL二维码.jpg" alt="" /></li>
                    <li class="three">
                        <p>请使用pilipili客户端</p>
                    </li>
                    <li>
                        <p>扫码登录或扫码下载App</p>
                    </li>
                </ul>
            </div>
            <div class="right">
                <nav id="nav">
                    <ul>
                        <li class="act">密码登录</li>
                        <li>短信登录</li>
                    </ul>
                </nav>
                <div id="container">
                    <section class="tab" style="background-color: tomato">
                        <div class="tab_one">
                            <ul class="search">
                                <li>
                                    <p>账号</p>
                                    <input type="password" placeholder="&nbsp;&nbsp;请输入账号">
                                </li>
                                <li>
                                    <p>密码</p>
                                    <input type="password" placeholder="&nbsp;&nbsp;请输入密码">
                                    <span class=""> </span>
                                        
                                   
                                </li>
                            </ul>	
                            <ul>
                                <li><a href="">登录</a></li>
                                <li><a href="">注册</a></li>
                                <li><a href="">其他方式登录</a></li>
                            </ul>
                        </div>
                    </section>
                    <section class="tab" style="background-color: cyan">内容2</section>
                </div>
            </div>
            <!-- <div class="footer">
                <ul>
                    <li><img src="./dlzuo.png" alt="" /></li>
                    <li><img src="./dlyou.png" alt=""></li>
                </ul>
            </div> -->
        </div>
    </div>
</body>
<script>
     window.onload=function () {
	        var nav=document.getElementById('nav');
	        var oNav=nav.getElementsByTagName('li');
	
	        var container=document.getElementById('container');
	        var oDiv=container.getElementsByClassName('tab');
	        for(var i=0;i<oNav.length;i++){
	            oNav[i].index=i;
	            oNav[i].onclick=function () {
	                for(var i=0;i<oNav.length;i++){
	                    oNav[i].className='';
	                    oDiv[i].style.display="none";
	                }
	                this.className='act';
	                oDiv[this.index].style.display="block"
	            }
	            for(var m=1;m<oNav.length;m++){
	                    oNav[m].className='';
	                    oDiv[m].style.display="none";
	                }
	        }
	    };
</script>
</html>